<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="float:left;width:15%;">
        <el-input v-model="listQuery.condition" placeholder="输入查询条件" clearable class="filter-item" />
      </span>
      <span style="float:left;width:13%;margin-left: 10px;">
        <el-date-picker v-model="listQuery.date" @change="handleFilter" :picker-options="pickerOps" clearable
          type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="操作日期" style="width: 100%;" />
      </span>
      <span style="float:left;margin-left: 10px;">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
      </span>
    </div>

    <!-- 表格 -->
    <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;height: 100%;">
      <el-table-column prop="username" label="登录用户账号" width="110" align="center" />
      <el-table-column prop="ip" label="登录IP" width="120" align="center" />
      <el-table-column prop="address" label="登录所在地IP" width="120" align="center" />
      <el-table-column prop="isp" label="运营商" width="100" align="center" />
      <el-table-column prop="userAgent" label="登录方式" width="120" align="center" />
      <el-table-column prop="method" label="请求方法" width="120" align="center" />
      <el-table-column prop="path" label="请求路径" align="center" />
      <el-table-column prop="createTime" label="操作时间" width="160" align="center" />
    </el-table>

    <!-- 分页 -->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
           :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    pageList
  } from '@/api/common'

  /* 工具 */
  import * as common from '@/utils/base/common'
  import {
    getDateRange
  } from '@/utils/dateUtil';

  export default {
    /*  内容: 操作日志  */
    name: 'sysLog_page',
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          pageSize: 10,
          condition: '',
          date: '',
        },
        restPath: 'monitor/log',

        /*  mydatas */
        // 日期条件设定
        pickerOps: {
          disabledDate(time) {
            return getDateRange(time)
          }
        },
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 后台获取列表数据
      getList() {
        this.listLoading = true
        pageList(this.restPath, this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        }).catch(err => {
          this.listLoading = false;
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      closeDialog() {
        this.showLog = false;
      },

      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      }

    } // methods end
  }
</script>

<style scoped>
  @import "~@/styles/list.css";
</style>
